import React, { Component } from 'react';
import SplashScreen from 'react-native-splash-screen';
import { View, Text, StatusBar, Image, Button } from 'react-native';
import NetInfo from '@react-native-community/netinfo';
import { ApiBannerData } from '@/api';
import Swiper from './swiper.js';

import PageSwiper from './swiperPage.js';

import GButton from '@/components/button';

class Home extends Component {
	props: any;
	state = {
		banners: [],
		bannerH: 150,
		network: null,
	};
	componentDidMount() {
		this.timer = setTimeout(() => {
			SplashScreen.hide(); // 隐藏启动屏
		}, 3000);
		SplashScreen.hide(); // 隐藏启动屏
		// 获取请求
		this.getBannerData();

		// // 网络状态
		NetInfo.fetch().then((info: any) => {
			this.setState({
				network: info.isConnected,
			});
		});
	}

	getBannerData = async () => {
		try {
			const data: any = await ApiBannerData({ type: 1 });
			this.setState({
				banners: data.banners,
			});
			console.log(data);
		} catch (error) {
			console.log(error);
		}
	};

	// 渲染banner
	renderBanner = () => {
		const { banners, bannerH } = this.state;
		return banners.map((item: any) => {
			return (
				<View key={item.targetId}>
					<Image
						source={{ uri: item.pic || item.imageUrl }}
						style={{ width: bg.width, height: bannerH }}
					/>
				</View>
			);
		});
	};

	render() {
		const { bannerH, network } = this.state;
		return (
			<View style={styles.contain}>
				<StatusBar barStyle="default" />
				<Text>HOME1111ddd</Text>
				<View style={{ margin: 10 }}>
					<GButton title="跳转webview页面" onPress={() => this.handleLink('Test')} />
				</View>
				<View height={bannerH}>
					<Swiper autoplay loop removeClippedSubviews={false}>
						{this.renderBanner()}
					</Swiper>
				</View>
				<View style={{ ...boxCenter }}>
					<Text>热门专区</Text>
					<Text>{`连接状态：${network}`}</Text>
				</View>
				<View style={{ margin: 10 }}>
					<Button title="跳转tabs 左右滑动" onPress={() => this.handleLink('TopTab')} />
				</View>
				<View style={{ margin: 10 }}>
					<Button title="跳转Swiper" onPress={() => this.handleLink('SwiperPage')} />
				</View>
				{/* <PageSwiper /> */}
			</View>
		);
	}

	handleLink = (link: String) => {
		const { navigate } = this.props.navigation;
		navigate(link, { name: 'gry' });
	};
}

const styles = {
	contain: {
		flex: 1,
	},
	slide1: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: '#9DD6EB',
	},
	slide2: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: '#97CAE5',
	},
	slide3: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: '#92BBD9',
	},
	text: {
		color: '#fff',
		fontSize: 30,
		fontWeight: 'bold',
	},
};

export default Home;
